<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>后勤管理</el-breadcrumb-item>
      <el-breadcrumb-item>保修列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--Tab-->
      <el-tabs v-model="activeName"
               @tab-click="changeArea"
               type="card">
        <el-tab-pane label="桃园"
                     name="桃园">
          <el-tabs v-model="towerIds"
                   ref="tabsRef"
                   @tab-click="getVisitersList">
            <el-tab-pane :label="item.towerName"
                         ref="tabPaneRef"
                         v-for="item in taoyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--学生列表区域-->
              <el-table :data="visitersList"
                        ref="visitersRef"
                        highlight-current-row>
                <el-table-column type="index"
                                 :index="indexMethod"></el-table-column>
                <el-table-column label="姓名"
                                 prop="name"></el-table-column>
                <el-table-column label="电话"
                                 prop="tel"></el-table-column>
                <el-table-column label="被访人姓名"
                                 prop="visitedName"></el-table-column>
                <el-table-column label="所在楼宇"
                                 prop="tower"></el-table-column>
                <el-table-column label="被访宿舍号"
                                 prop="dorm"></el-table-column>
                <el-table-column label="值班人员"
                                 prop="watch"></el-table-column>
                <el-table-column label="访问事由"
                                 min-width='100px'
                                 prop="matter"></el-table-column>
                <el-table-column label="备注"
                                 min-width='100px'
                                 prop="remake"></el-table-column>
                <el-table-column label="访问时间"
                                 min-width='70px'
                                 prop="visitTime"></el-table-column>
                <el-table-column label="离开时间"
                                 min-width='70px'
                                 prop="leaveTime"></el-table-column>
                <el-table-column label="是否完成"
                                 min-width='130px'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isLeave"
                               active-text="已完成"
                               inactive-text="未完成"
                               @change="hadLeft(scope.row._id,scope.row.leaveTime)"
                               active-color="#13ce66"
                               inactive-color="#ff4949">
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="dataList.pagenum"
                           :page-sizes="[1, 3, 5, 7]"
                           :page-size="dataList.pagesize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="兰园"
                     name="兰园">
          <el-tabs v-model="towerIds"
                   @tab-click="getVisitersList">
            <el-tab-pane :label="item.towerName"
                         v-for="item in lanyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--学生列表区域-->
              <el-table :data="visitersList"
                        ref="visitersRef"
                        highlight-current-row>
                <el-table-column type="index"
                                 :index="indexMethod"></el-table-column>
                <el-table-column label="姓名"
                                 prop="name"></el-table-column>
                <el-table-column label="电话"
                                 prop="tel"></el-table-column>
                <el-table-column label="被访人姓名"
                                 prop="visitedName"></el-table-column>
                <el-table-column label="所在楼宇"
                                 prop="tower"></el-table-column>
                <el-table-column label="被访宿舍号"
                                 prop="dorm"></el-table-column>
                <el-table-column label="值班人员"
                                 prop="watch"></el-table-column>
                <el-table-column label="访问事由"
                                 min-width='100px'
                                 prop="matter"></el-table-column>
                <el-table-column label="备注"
                                 min-width='100px'
                                 prop="remake"></el-table-column>
                <el-table-column label="访问时间"
                                 min-width='70px'
                                 prop="visitTime"></el-table-column>
                <el-table-column label="离开时间"
                                 min-width='70px'
                                 prop="leaveTime"></el-table-column>
                <el-table-column label="是否完成"
                                 min-width='130px'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isLeave"
                               active-text="已完成"
                               inactive-text="未完成"
                               @change="hadLeft(scope.row._id,scope.row.leaveTime)"
                               active-color="#13ce66"
                               inactive-color="#ff4949">
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="dataList.pagenum"
                         :page-sizes="[1, 3, 5, 7]"
                         :page-size="dataList.pagesize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="荔园"
                     name="荔园">
          <el-tabs v-model="towerIds"
                   @tab-click="getVisitersList">
            <el-tab-pane :label="item.towerName"
                         v-for="item in liyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--学生列表区域-->
              <el-table :data="visitersList"
                        ref="visitersRef"
                        highlight-current-row>
                <el-table-column type="index"
                                 :index="indexMethod"></el-table-column>
                <el-table-column label="姓名"
                                 prop="name"></el-table-column>
                <el-table-column label="电话"
                                 prop="tel"></el-table-column>
                <el-table-column label="被访人姓名"
                                 prop="visitedName"></el-table-column>
                <el-table-column label="所在楼宇"
                                 prop="tower"></el-table-column>
                <el-table-column label="被访宿舍号"
                                 prop="dorm"></el-table-column>
                <el-table-column label="值班人员"
                                 prop="watch"></el-table-column>
                <el-table-column label="访问事由"
                                 min-width='100px'
                                 prop="matter"></el-table-column>
                <el-table-column label="备注"
                                 min-width='100px'
                                 prop="remake"></el-table-column>
                <el-table-column label="访问时间"
                                 min-width='70px'
                                 prop="visitTime"></el-table-column>
                <el-table-column label="离开时间"
                                 min-width='70px'
                                 prop="leaveTime"></el-table-column>
                <el-table-column label="是否完成"
                                 min-width='130px'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isLeave"
                               active-text="已完成"
                               inactive-text="未完成"
                               @change="hadLeft(scope.row._id,scope.row.leaveTime)"
                               active-color="#13ce66"
                               inactive-color="#ff4949">
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="dataList.pagenum"
                         :page-sizes="[1, 3, 5, 7]"
                         :page-size="dataList.pagesize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { formDate } from 'commonjs/formatDate.js'
import { allTowerMixin } from 'commonjs/allTowerMixin.js'
import { visitedMixin } from 'commonjs/visitedMixin.js'

export default {
  name: 'DormVisitAll',
  props: [''],
  data () {
    return {

    }
  },

  methods: {
    async getVisitersList (tab) {
      if (!tab === undefined) {
        this.towerIds = tab.label
      }
      this.visitersList = []
      const { data: res } = await this.$axios.get('/visit/findVisiters', {
        params: {
          tower: this.towerIds,
          pagenum: this.dataList.pagenum,
          pagesize: this.dataList.pagesize
        }
      })
      if (res.meta.code === 200) {
        res.visitersList.forEach(valid => {
          if (valid.leaveTime) {
            // console.log('存在离开时间')
            valid.visitTime = formDate(valid.visitTime)
            valid.leaveTime = formDate(valid.leaveTime)
            valid.isLeave = true
            this.visitersList.push(valid)
          } else {
            // console.log('不存在离开时间')
            valid.visitTime = formDate(valid.visitTime)
            valid.isLeave = false
            this.visitersList.push(valid)
          }
        })
        // console.log(this.visitersList)
        this.total = res.total
      } else {
        this.$message.error(res.meta.msg)
      }
    },
    changeArea (tab) {
      this.activeName = tab.label
      this.towerIds = this.activeName + '1'
      this.getVisitersList(tab)
    },
    handleSizeChange (size) {
      this.dataList.pagesize = size
      this.getVisitersList(undefined)
    },
    handleCurrentChange (currentPage) {
      this.dataList.pagenum = currentPage
      this.getVisitersList(undefined)
    }
  },

  watch: {},
  mixins: [allTowerMixin, visitedMixin]

}

</script>
<style lang='' scoped>
</style>
